<!--
 * @Author: 可以清心
 * @Description: 
 * @Date: 2022-11-24 11:31:09
 * @LastEditTime: 2022-12-07 15:07:22
-->
<template>
    <div class="form-wrap" v-if="!loading">
        <div class="apaas-login">
            <div class="logo">
                <img src="@/assets/img/logo.png" alt="">
            </div>
            <div class="app-name">
            {{applicationName}}
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="后台管理" name="background">
                <jdf-login :loginType="loginType"></jdf-login>
              </el-tab-pane>
              <el-tab-pane label="平台管理" name="platform">
                <jdf-login></jdf-login>
              </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <div class="loading-wrap" v-else>
        <div class='app-loading' style="color: #005EBA;">
            <div class="loading">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import { RouterView } from 'vue-router';
  import JdfLogin from '../login/index.vue'
  
  
  export default {
      name: "JdfForm",
      components: { RouterView, JdfLogin },
      data(){
        return {
          applicationName: '京东方低代码后台管理',
          loading: false,
          activeName: 'background',
          loginType: 'MANAGE'
        }
      },
      created(){

      },
      methods: {
        /**
         * @description: 获取应用信息
         * @return {{tenantId?: string; appId?: string; domain?: string; path?: string;}}
         */        
        getApplicationInfo(){
            let GLOBAL_ENV = window.GLOBAL_ENV;
        
            if(GLOBAL_ENV){
                return {
                    tenantId: GLOBAL_ENV['VUE_APP_TENANT_ID'],
                    appId: GLOBAL_ENV['VUE_APP_APP_ID'],
                    domain: GLOBAL_ENV['VUE_APP_BASE_DOMAIN'],
                    path: GLOBAL_ENV['VUE_APP_PUBLIC_PATH'],
                }
            }

            return {}
        },
        /**
         * @description: 应用有token就直接跳转app
         * @return {void}
         */        
        // jumpApp(){
        //     const {getApplicationInfo} = this;

        //     let applicationInfo = getApplicationInfo();

        //     const {appId, path, domain} = applicationInfo;

        //     let storageInfo = localStorage.getItem(`__vuex__${appId}__local`);

        //     let result = null;

        //     try {
        //         result = JSON.parse(storageInfo);
        //     } catch (error) {
        //         console.error('解析json失败');
        //     }

        //     if(result && result.authModule && result.authModule.token){
        //         window.open(domain + path, '_self')
        //     }else{
        //         this.loading = false;
        //     }
        // },
        /**
         * @description: 
         * @param {{name: string; [index: string]: any}} tab
         * @return {void}
         */        
        handleClick(tab){
          if(tab.name === 'platform'){
            this.applicationName = '京东方低代码平台管理'
            this.loginType = ''
          }else{
            this.applicationName = '京东方低代码后台管理',
            this.loginType = 'MANAGE'
          }
        }
      }
  }
  </script>
  
  <style lang="less">
  .loading-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-wrap{
    width: 100%;
    height: 100%;
    background-image: url(@/assets/img/background.png);
  }
  .apaas-login {
        
      position: fixed;
      padding: 34px 41px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 382.5px;
      // height: 370px;
      background-color: #fff;
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.10);
      box-sizing: border-box;
  
      .logo {
          // margin-top: 34px;
          text-align: center;
      }
  
      .app-name {
          margin-top: 21.7px;
          margin-bottom: 30px;
          font-family: FZLTHJW--GB1-0;
          font-size: 16px;
          color: #313233;
          text-align: center;
      }

      .el-tabs{
        .el-tabs__item:hover{
          color: #005EBA;
        }
        .el-tabs__nav.is-top{
          width: 100%;
          .el-tabs__active-bar.is-top{
            width: 150px;
            background-color: #005EBA;
          }

          #tab-background{
            width: 150px;
            text-align: center;
          }

          #tab-background.is-active{
            color: #005EBA;
          }

          #tab-platform{
            width: 150px;
            text-align: center;
          }

          #tab-platform.is-active{
            color: #005EBA;
          }
        }
      }
  
      .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: #005EBA;
        border-color: #005EBA;
      }
  
      .el-button--primary, .el-button--primary:hover, .el-button--primary:focus{
        background-color: #005EBA;
        border-color: #005EBA;
      }
  
      .el-input.is-active .el-input__inner, .el-input__inner:focus{
        border-color: #005EBA;
      }
  }
  </style>
  